<template>
  <div class="chatTab">
    <van-tabs
      v-model:active="activeName"
      color="#72CDCD"
      title-active-color="#72CDCD"
      line-width="23%"
    >
      <van-tab title="关注" name="a">内容 1</van-tab>
      <van-tab title="精选" name="b">
        <!--选项卡的两栏布局 -->
        <div class="list">
          <!-- 左侧 -->
          <div class="listLeft">
            <img src="../../assets/images/chatLeft1.png" alt="" />
            <img src="../../assets/images/chatLeft2.png" alt="" />
          </div>
          <!-- 右侧 -->
          <div class="listRight">
            <img src="../../assets/images/chatRight1.png" alt="" />
            <img src="../../assets/images/chatRight2.png" alt="" />
            <img src="../../assets/images/chatRight3.png" alt="" />
          </div>
        </div>
      </van-tab>
      <van-tab title="新帖" name="c">内容 3</van-tab>
      <van-tab title="一周最热" name="d">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from "vue";
import { Tab, Tabs } from "vant";
import "vant/es/tab/style";
import "vant/es/tabs/style";
export default {
  setup() {
    const activeName = ref("b");
    return { activeName };
  },

  components: {
    VanTabs: Tabs,
    VanTab: Tab,
  },
};
</script>

<style lang="less" scoped>
// .chatTab {
//   margin-top: 50px;
// }
:deep(.van-tab) {
  width: 110px;
  margin-left: 50px;
  flex: auto;
}
:deep(.van-tab__text--ellipsis) {
  font-size: 30px;
  font-weight: bold;
  color: #8f8f8f;
  overflow: visible;
  padding-bottom: 20px;
  display: inline-block;
}
:deep(.van-tabs__wrap) {
  height: 80px;
}
.list {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-between;
}
.listLeft {
  width: 49%;
  img {
    display: block;
    width: 100%;
  }
}
.listRight {
  width: 49%;
  img {
    display: block;
    width: 100%;
  }
}
</style>
